<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-我的订单</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/orders.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="top-bar">
        <div class="nav-bar">
            <h3 class="page-title">我的订单</h3>
            <a class="nav-btn fl" href="{{ url_for('house_bp.my') }}">
                <span>
                    <i class="fa fa-angle-left fa-2x"></i>
                </span>
            </a>
        </div>
    </div>
    <div class="orders-con">
        <ul class="orders-list">
        </ul>
    </div>
    <div class="footer">
        <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
    </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/static/js/template.js"></script>
<script>
    // 模态框居中的控制
    function centerModals() {
        $('.modal').each(function (i) {   // 遍历每一个模态框
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top - 30);  // 修正原先已经有的30个像素
        });
    }

    $(document).ready(function () {
        // 获取订单列表
        $.ajax({
            url: '/order/my_orders/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                orders = data.orders;
                console.log('ajax成功');
                console.log(data);
                msg = '';
                // 循环遍历订单，生成订单列表
                for (i in orders) {
                    msg += '<li order-id="' + orders[i].order_id + '"><div class="order-title">';
                    msg += '<h3>订单编号' + orders[i].order_id + '</h3><div class="fr order-operate">';

                    // 添加支付按钮，只有状态为"待支付"才会显示支付按钮
                    if (orders[i].status === "待支付") {
                        msg += '<button type="button" class="btn btn-primary order-pay" data-order-id="' + orders[i].order_id + '">支付</button>';
                    }

                    msg += '</div></div>';
                    msg += '<div class="order-content"><img src="/static/media/' + orders[i].image + '">' +
                        '<div class="order-text">' +
                        '<h3>订单</h3>' +
                        '    <ul>' +
                        '        <li>创建时间：' + orders[i].create_date + '</li>' +
                        '        <li>入住日期：' + orders[i].begin_date + '</li>' +
                        '        <li>离开日期：' + orders[i].end_date + '</li>' +
                        '        <li>合计金额：' + orders[i].amount + '元(共' + orders[i].days + '晚)</li>' +
                        '        <li>订单状态：' +
                        '            <span>' + orders[i].status + '</span>' +
                        '        </li>' +
                        '    </ul>' +
                        '</div>' +
                        '</div></li>';
                }
                $('.orders-list').append(msg);  // 渲染订单列表到页面
            },
            error: function () {
                alert('获取订单数据失败，请重试');
            }
        });

        // 当模态框显示时居中
        $('.modal').on('show.bs.modal', centerModals);
        $(window).on('resize', centerModals);

        // 使用事件委托绑定支付按钮的点击事件
        $(document).on('click', '.order-pay', function () {
            var orderId = $(this).data("order-id");  // 获取订单ID
            $.ajax({
                url: '/order/pay/',
                type: 'POST',
                data: {
                    order_id: orderId
                },
                success: function (data) {
                    if (data.success) {
                        alert('支付成功！');
                        location.reload();  // 支付成功后刷新页面或更新订单状态
                    } else {
                        alert('支付失败，请重试');
                    }
                },
                error: function () {
                    alert('支付请求失败，请重试');
                }
            });
        });
    });
</script>
</body>
</html>